<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="租借记录"></uni-nav-bar>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index"
				  class="nav-item"
				  :class="{current: tabCurrentIndex === index}"
				  @click="tabClick(index)">
				{{item.title}}
			</view>
		</view>

		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<view class="order_list" v-for="(item, index) in list" :key="index">
					<view class="tui-flex flex-spew">
						<view>{{item.leaseTime}}</view>
						<view style="color: #333">订单编号: {{item.transactionNo}}</view>
					</view>
					<view class="tui-flex" style="padding: 26rpx 0;border-bottom: 2rpx solid #eee;"
						  @tap="navTo('/pagesA/coupons/leaseDetail?id='+item.productId)">
						<view class="flex_image">
							<image class="c_img" :src="item.pic"></image>
						</view>
						<view style="padding-left: 25rpx;flex: 1;">
							<view style="font-size: 30rpx">{{item.productName}}</view>
							<view style="color: #999">{{item.description}}</view>
							<view>￥<text style="font-size: 34rpx;color: red">{{item.rent}}</text></view>
						</view>
					</view>
					<view class="tui-flex tui-space-between" style="padding-top: 15rpx"
						@tap="showToggle(item, index)">
						<view>租借信息</view>
						<uni-icons v-if="!item.boxShow" type="arrowdown" size="38" color="#999"></uni-icons>
						<uni-icons v-else type="arrowup" size="38" color="#999"></uni-icons>
					</view>
					<view v-if="item.boxShow" :class="{'is_boxShow':item.boxShow}">
						<view class="tui-flex tui-space-between">
							<view style="color: #999">租借人姓名:</view>
							<view>{{item.leaseName}}</view>
						</view>
						<view class="tui-flex tui-space-between">
							<view style="color: #999">租借人手机号:</view>
							<view>{{item.leasePhone}}</view>
						</view>
						<view class="tui-flex tui-space-between">
							<view style="color: #999">租借时间:</view>
							<view>{{item.leaseTime}}</view>
						</view>
						<view class="tui-flex tui-space-between" v-if="item.returnTime">
							<view style="color: #999">归还时间:</view>
							<view>{{item.returnTime}}</view>
						</view>
					</view>
				</view>
				<empty v-if="!list.length && !isLoading"></empty>
				<view v-if="list.length" class="cu-load text-gray" :class="loadStatus"></view>
				<load v-model="isLoading"></load>
			</scroll-view>
		</view>
	</view>
</template>
<script>
    import empty from '@/components/empty/index.vue'
    import load from '@/components/empty/load.vue'
    import uniIcons from "@/components/uni-icons/uni-icons.vue"

	export default {
        components: { empty, load, uniIcons },
	    data() {
	        return {
                navList: [{title: '待领取', id: 0},{title: '待归还', id: 1},{title: '已归还', id: 2}],
                tabCurrentIndex: 0,
				list: [],
				listQuery: {
                    pageNum: 1,
					pageSize: 10,
				},
                lastPage: 1,
				isLoading: true,
				loadStatus: '',
			}
		},
		onReachBottom() {
            if (this.listQuery.pageNum < this.lastPage) {
                this.listQuery.pageNum += 1
                this.getList()
			}
		},
		onLoad(option) {
            if(option.id != undefined) {
                this.tabCurrentIndex = +option.id;
            }
	        this.getList()
		},
		methods: {
	        getList() {
	            let that = this
				that.isLoading = true
                that.loadStatus = 'loading'
                that.listQuery = {
                    ...this.listQuery,
                    status: this.tabCurrentIndex,
                    pageNum: this.listQuery.pageNum
                }
                that.$api.api('lease.page', that.listQuery).then(res => {
                    if (res.code == 200) {
                        res.data.list.forEach(item=>{
                            this.$set(item, 'boxShow', false)
                            that.list.push(item);
                        })
                        that.lastPage = res.data.totalPage
						if (that.listQuery.pageNum < res.data.totalPage) {
                            that.loadStatus = ''
						} else {
                            that.loadStatus = 'over'
						}
                    } else {
                        this.$api.msg(res.message)
					}
                    that.isLoading = false
                }).catch(error => {
                    that.isLoading = false
                    this.$api.msg(error.message)
                })
			},
			//	加载更多
            loadMore() {
	            if (this.listQuery.pageNum < this.lastPage) {
                    this.listQuery.pageNum += 1
                    this.getList()
				}
			},
            tabClick(index) {
                this.tabCurrentIndex = index
				this.list = []
				this.listQuery.pageNum = 1
				this.getList()
			},
            navTo(url) {
	            uni.navigateTo({
					url: url
				})
			},
            showToggle(item, index) {
                this.list.forEach(i => {
                    if (i.boxShow !== this.list[index].boxShow) {
                        i.boxShow = false;
                    }
                });
                item.boxShow = !item.boxShow;
            }
		}
	}
</script>
<style lang="scss" scoped>
	.navbar {
		display: flex;
		background-color: $uni-bg-color;
		height: 80rpx;
		padding: 0 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);
		// position: relative;
		position: fixed;
		width: 100%;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: $uni-text-color-grey;
			position: relative;
			&.current{
				color: $uni-color-success;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 80rpx;
					height: 0;
					border-bottom: 6rpx solid $uni-color-success;
				}
			}
		}
	}

	.content_box {
		margin-top: 90rpx;
		.order_list {
			margin: 20rpx;
			background: #fff;
			padding: 20rpx;
			border-radius: 15rpx;
			.is_boxShow {
				height: 100%;
				transition: all 0.5s;
				transition-duration: 0.5s;
				-webkit-transition: all .5s;
			}
			.flex-spew {
				justify-content: space-between;
				padding-bottom: 10rpx;
				color: #999;
				border-bottom: 2rpx solid #eee;
			}
			.flex_image {
				width: 30%;
				height: 160rpx;
				.c_img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
